<template>
  <div id="search">
    <!-- input 搜索框 -->
    <div class="in-zuida">
      <div class="ip-search">
        <i class="iconfont icon-sousuo" @click="add"></i>
        <input
          placeholder="搜索歌曲、歌手、专辑"
          v-model="inpVal"
          @keyup.enter="add"
        />
        <i class="iconfont icon-message-close" v-show="shancuo" @click="scip"></i>
      </div>
    </div>
    <!-- 热搜列表 -->
    <div class="box" v-show="isShow">
      <h3>热门搜索</h3>
      <div class="t-body">
        <template v-for="item in perArr">
          <router-link tag="ul" to="#" class="t-neirong" :key="item.id">
            <li @click="lishiadd(item.first)">{{ item.first }}</li>
          </router-link>
        </template>
      </div>
    </div>
    <!-- 历史记录 -->
    <div class="lishi" v-show="lishi">
      <template v-for="(item, index) in lishiArr">
        <ul :key="item.id">
          <li class="iconfont icon-lishi"></li>
          <li @click="lishiadd(item.content)">
            {{ item.content }}
          </li>
          <i class="iconfont icon-message-close" @click="shanchu(index)"></i>
        </ul>
      </template>
    </div>

    <!-- 搜索多重匹配 -->
    <div class="box1" v-show="isAxios">
      <h3>最佳匹配</h3>
      <div class="pipei">
        <ul class="geshou" v-show="geshou">
          <li><img :src="geshou.img1v1Url" alt="" /></li>
          <li>
            <h4>{{ geshou.occupation }}:{{ geshou.name }}</h4>
          </li>
          <li class="iconfont icon-youjiantou"></li>
        </ul>
        <!-- <ul class="geshou" v-show="zhuanji"> -->
          <router-link class="geshou" tag="geshow" v-show="zhuanji" :to="`/details/${zhuanji.id}`">
          <li><img :src="zhuanji.blurPicUrl" alt="" /></li>
          <li>
            <h4>{{ zhuanji.type }}:{{ zhuanji.name }}</h4>
            <p>{{ geshou.name }}</p>
          </li>
          <li class="iconfont icon-youjiantou"></li>
          </router-link>
        <!-- </ul> -->
        <!-- 歌曲 组件Gq.vue -->
        <gq :perArr1="pergqarr"></gq>
      </div>
    </div>

    <!-- 搜索建议 -->
    <div class="gqss" v-show="isss">
      <h1>搜索“{{ inpVal }}”</h1>
    </div>
    <div class="t-ss" v-show="isss" @click="add">
      <template v-for="item in perss">
        <ul :key="item.id">
          <router-link tag="li" to="#">
            <span class="iconfont icon-sousuo"></span>
            <span>{{ item.name }} </span>
          </router-link>
        </ul>
      </template>
    </div>
  </div>
</template>

<script>
import gq from "../../components/Gq.vue";

export default {
  data: () => {
    return {
      perArr: [],
      pertrr: [],
      pergqarr: [],
      perss: [],
      lishiArr: JSON.parse(localStorage.getItem("lishiArr")) || [],

      inpVal: "",
      infoList: "",
      isShow: true,
      isAxios: false,
      isss: false,
      lishi: true,
      shancuo: false,

      geshou: "",

      zhuanji: "",
    };
  },
  methods: {
    add() {
      this.infoList = this.inpVal;
      this.isAxios = true;
      this.isss = false;
      this.shancuo = true;
      if (this.inpVal) {
        this.lishiArr.unshift({
          content: this.inpVal,
        });
      }
    },
    shanchu(index) {
      this.lishiArr.splice(index, 1);
    },
    scip() {
      this.inpVal = this.infoList = "";
    },
    lishiadd(iu) {
      this.inpVal = this.infoList = iu;
      this.isAxios = true;
      this.isss = false;
      console.log(this.isss);
      this.shancuo = true;
      if (this.inpVal) {
        this.lishiArr.unshift({
          content: this.inpVal,
        });
      }
    },
  },
  async mounted() {
    // 热搜列表
    let res = await this._axios.get("/search/hot");
    this.perArr = res.data.result.hots;
    // console.log(sousuo);
  },
  watch: {
    async infoList() {
      //  歌曲搜索
      if (this.infoList) {
        let gequ = await this._axios.get(
          `/cloudsearch?keywords=${this.infoList}`
        );
        this.pergqarr = gequ.data.result.songs;

        // 歌手专辑搜索
        let res1 = await this._axios.get(
          `/search/multimatch?keywords=${this.infoList}`
        );
        if(!this.geshou.artist){
         this.zhuanji = false
        }
          if(!res1.data.result.album){
         this.geshou = false
        }
        this.pertrr = res1.data.result;
        this.geshou = this.pertrr.artist[0];
        this.zhuanji = this.pertrr.album[0];
        console.log(res1);

        // console.log(this.zhuanji);

        // console.log(this.pertrr);
      }
    },

    async inpVal() {
      if (this.inpVal) {
        this.isShow = false;
        if (this.isss) {
          this.isAxios=false;
        }
        this.isss = true;
        this.lishi = false;
        this.shancuo = true;
        let sousuo = await this._axios.get(
          `/search/suggest?keywords= ${this.inpVal}`
        );
        this.perss = sousuo.data.result.songs;
      } else {
        this.isss = false;
        this.isShow = true;
        this.isAxios = false;
        this.lishi = true;
        this.shancuo = false;
      }

      // console.log(sousuo);
    },

    lishiArr() {
      localStorage.setItem("lishiArr", JSON.stringify(this.lishiArr));
    },
  },

  components: {
    gq,
  },
};
</script>

<style lang="scss" scoped>
#search {
  h3 {
    padding-left: _vw(20);
    font-size: _vw(12);
    color: #666;
    line-height: _vw(60);
  }
  .in-zuida {
    position: relative;
    padding: 15px 10px;
    border: 1px solid #f3f3f3;
  }
  .ip-search {
    width: _vw(700);
    height: _vw(60);
    background-color: #ebecec;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    input {
      outline: none;
      border: none;
      height: 100%;
      width: _vw(600);
      background-color: #ebecec;
      font-size: _vw(28);
      font-family: sans-serif;
    }
    i {
      // margin-left:_vw(20) ;
      color: #c7c7c8;
      // margin: 0 _vw(20);
    }
  }

  //  热搜列表
  .t-body {
    display: flex;
    flex-wrap: wrap;
    margin-top: _vw(5);

    ul {
      height: _vw(60);
      border-radius: _vw(30);
      border: 1px solid #ebecef;
      margin: _vw(10) _vw(5);
      display: flex;
      align-items: center;

      li {
        margin: 0 _vw(25);
        font-size: _vw(30);
      }
    }
  }

  // 搜索多重匹配 歌手 专辑
  .pipei {
    .geshou {
      margin-left: _vw(20);
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: _vw(710);
      height: _vw(120);
      h4 {
        font-size: _vw(36);
        font-weight: 500;
      }
      li:nth-child(1) {
        width: _vw(100);
        height: _vw(100);
        img {
          width: 100%;
          height: 100%;
        }
      }
      li:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: center;

        width: _vw(550);
        height: _vw(100);

        p {
          color: #999;
          font-size: _vw(24);
        }
      }
      li:nth-child(3) {
        font-size: _vw(40);
      }
    }
  }

  // 搜索建议
  .gqss {
    width: _vw(750);
    height: _vw(100);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f3f3;
    h1 {
      font-size: _vw(36);
      font-weight: 100;
      margin-left: _vw(10);
      color: #507daf;
    }
  }
  .t-ss {
    ul {
      width: _vw(750);
      height: _vw(100);
      li {
        width: _vw(750);
        height: _vw(100);
        display: flex;
        align-items: center;
      }
      span {
        display: flex;
        align-items: center;
        margin: _vw(0) _vw(10);
      }
      span:nth-child(2) {
        height: _vw(100);
        width: _vw(750);
        border-bottom: 1px solid #f3f3f3;
      }
    }
  }

  // 历史记录
  .lishi {
    ul {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: _vw(100);
      width: _vw(750);

      li:nth-child(1) {
        margin: 0 _vw(20);
      }
      li:nth-child(2) {
        width: _vw(750);
        height: _vw(100);
        border-bottom: _vw(1) solid rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      i {
        margin: 0 _vw(20);
      }
    }
  }
}
</style>